<template>
  <div class="wrap">
       <div class="tou">会员中心</div>
    <header>
      <!-- 导航栏 -->
      <!-- <van-nav-bar :title="$route.name"></van-nav-bar> -->
      <div class="header1">
        <div class="header2"  >
          <img src="../assets/img/mine/微信图片_20240515095332.jpg" alt="">
          <div class="header4">
            <h2>韩旭东</h2>
            <div class="header3">
              <p>完善资料让小U更懂您</p>
            </div>
          </div>
         
        </div>
        <div class="header5">
          <div class="header6">
            <h1>12</h1>
            <p>我的收藏</p>
          </div>
          <div class="header6">
            <h1>12</h1>
            <p>浏览记录</p>
          </div>
          <div class="header6">
            <h1>
              <span>￥</span> 0
            </h1>
            <p>我的钱包</p>
          </div>
          <div class="header6">
            <h1>12</h1>
            <p>优惠卷</p>
          </div>
        </div>
        <div class="header7">
          <div class="header8">
            <h2>我的订单</h2>
            <p>全部订单></p>
          </div>
          <div class="header9">
            <ul>
              <li v-for="item in navigation" :key="item.id">
                <img :src="item.imgUrl" alt />
                <a href>{{item.name}}</a>
              </li>
              <!-- 、 -->
            </ul>
          </div>
        </div>
      </div>
    </header>
    <main>
      <div class="main1">
        <div class="main2">
          <div class="main3">
            <div class="main4" v-for="item in list" :key="item.id" @click="$router.push(`/dizi`)">
              <div class="main5">
                <img :src="item.imgUrl" alt />
                <p>{{item.title}}</p>
              </div>
              <div class="main6">
                <p>{{item.info}}</p>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>


<script>
// import mixin from "@/utils/mixin";
// import qs from "qs";
import payment from '@/assets/img/mine/payment.png'
import take from '@/assets/img/mine/take.png'
import evaluate from '@/assets/img/mine/evaluate.png'
import refund from '@/assets/img/mine/refund.png'

import address from '@/assets/img/mine/address.png'
import wallet from '@/assets/img/mine/wallet.png'
import QR_code from '@/assets/img/mine/QR_code.png'
import partner from '@/assets/img/mine/partner.png'
import free from '@/assets/img/mine/free.png'
export default {
  // mixins: [mixin],
  data() {
    return {
      mines: null,
      user: "",
      navigation:[
        {
          id:1,
          imgUrl:payment,
          name:'代付款',
        },
        {
          id:2,
          imgUrl:take,
          name:'待收货',
        },
        {
          id:3,
          imgUrl:evaluate,
          name:'评价',
        },
        {
          id:4,
          imgUrl:refund,
          name:'售后/退款',
        },
      ],
      list:[
        {
          id:1,
          imgUrl:address,
          title:'地址管理',
          info:'>',
          Url:'/dizi'
        },
        {
          id:2,
          imgUrl:wallet,
          title:'我的钱包',
          info:'剩余200U币',
          Url:'/goods'
        },
        {
          id:3,
          imgUrl:QR_code,
          title:'我的二维码',
          info:'>'
        },
        {
          id:4,
          imgUrl:partner,
          title:'我的小伙伴',
          info:'>'
        },
        {
          id:5,
          imgUrl:free,
          title:'0元试用',
          info:'>'
        },
      ],
  
    };
  },
  // 方法
 
};
</script>

<style scoped>
.wrap {
  /* width: 7.5rem; */
  margin: 0 auto;
}
.tou {
  width: 100%;
  background-image: linear-gradient(
      180deg,
      #fe502d 0%,
      #fb4723 31%,
      #fb5136 71%,
      #ff5849 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);

  height: 46px;
  color: #323233;

  font-size: 24px;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.van-nav-bar {
  width: 100%;
  background-image: linear-gradient(
      180deg,
      #fe502d 0%,
      #fb4723 31%,
      #fb5136 71%,
      #ff5849 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
}
.wrap header {
  width: 7.5rem;
  height: 4.82rem;
  box-shadow: -0.01rem 0.05rem 0.1rem 0rem rgba(255, 111, 87, 0.35);
  background-image: linear-gradient(
    180deg,
    #ff6040 0%,
    #ff7560 71%,
    #ff8a80 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.header1 {
  width: 7.5rem;
  height: 4.03rem;
}
.header1 .header2 {
  width: 7.3rem;
  height: 1.32rem;
  margin-left: 0.2rem;
  display: flex;
}
.header1 .header2 img {
  width: 1.28rem;
  height: 1.28rem;
}
.header1 .header2 .header4 {
  width: 2.13rem;
  height: 1.28rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 0.15rem;
}
.header1 .header2 .header4 h2 {
  font-size: 0.3rem;
  color: white;
}
.header1 .header2 .header4 .header3 {
  width: 2.06rem;
  height: 0.3rem;
  border: 0.04rem solid #ffb4a7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header1 .header2 .header4 .header3 p {
  font-size: 0.2rem;
  color: white;
}
.tu {
  width: 1.53rem;
  height: 0.43rem;
  margin-left: 2.2rem;
  margin-top: 0.54rem;
}
.header2 .tu img {
  width: 1.53rem;
  height: 0.43rem;
}
.header1 .header5 {
  width: 7.5rem;
  height: 0.59rem;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
}
.header1 .header5 .header6 {
  width: 0.79rem;
  height: 0.59rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header1 .header5 .header6 h1 {
  font-size: 0.34rem;
  color: #fff;
}
.header1 .header5 .header6 p {
  font-size: 0.18rem;
  color: #ffcbc3;
}
.header1 .header5 .header6 h1 span {
  font-size: 0.35rem;
}
.header1 .header7 {
  width: 7.1rem;
  height: 2.05rem;
  background-color: #ffffff;
  margin: 0.2rem auto;
  border-radius: 0.1rem;
}
.header1 .header7 .header8 {
  width: 7.1rem;
  height: 0.74rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header1 .header7 .header8 h2 {
  font-size: 0.3rem;
  margin-left: 0.21rem;
}
.header1 .header7 .header8 p {
  font-size: 0.22rem;
  color: #ff6748;
  margin-right: 0.19rem;
}
.header1 .header7 .header9 {
  width: 7.1rem;
  height: 0.87rem;
  margin-top: 0.2rem;
}
.header1 .header7 .header9 ul {
  display: flex;
  justify-content: space-around;
}
.header1 .header7 .header9 ul li {
  font-size: 0.18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header1 .header7 .header9 ul li img {
  width: 0.6rem;
  height: 0.48rem;
}
.header1 .header7 .header9 ul li a {
  display: block;
  height: 0.58rem;
  line-height: 0.58rem;
  color: black;
}
.main1 {
  width: 7.5rem;
  height: 8.62rem;
  background-color: #f2f2f2;
  display: flex;
}
.main1 .main2 {
  width: 7.5rem;
  height: 4.02rem;
  background-color: white;
  margin-top: 0.72rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main1 .main2 .main3 {
  width: 7.12rem;
  height: 3.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main1 .main2 .main3 .main4 {
  width: 7.12rem;
  height: 0.32rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main1 .main2 .main3 .main4 .main5 {
  width: 1.7rem;
  height: 0.32rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.main1 .main2 .main3 .main4 .main10 {
  width: 1.56rem;
  height: 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main1 .main2 .main3 .main4 .main10 img {
  width: 0.3rem;
  height: 0.32rem;
}
.main1 .main2 .main3 .main4 .main10 p {
  font-size: 0.21rem;
}
.main1 .main2 .main3 .main4 .main12 {
  width: 1.26rem;
  height: 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main1 .main2 .main3 .main4 .main12 p {
  font-size: 0.21rem;
}
.main1 .main2 .main3 .main4 .main12 img {
  width: 0.3rem;
  height: 0.32rem;
}
.main1 .main2 .main3 .main4 .main5 img {
  width: 0.3rem;
  height: 0.32rem;
}
.main1 .main2 .main3 .main4 .main5 p {
  font-size: 0.22rem;
  color: black;
  padding-left: 0.25rem;
}
.main1 .main2 .main3 .main4 .main6 p {
  font-size: 0.18rem;
}
</style>


